"use client";
import LanguageSwitcher from "../components/LanguageSwitcher";
import Menu from "../components/Menu";
import { useTranslation } from "react-i18next";
import { Button } from "antd";
import { Flex, Layout } from "antd";
const layoutStyle = {
  // borderRadius: 8,
  overflow: "hidden",
  width: "calc(100% )",
  maxWidth: "calc(100%)",
  minHeight: "100vh",
  // height: "100vh",
};
const { Header, Footer, Content } = Layout;
const headerStyle: React.CSSProperties = {
  textAlign: "center",
  color: "#fff",
  height: 64,
  paddingInline: 48,
  lineHeight: "64px",
  backgroundColor: "#4096ff",
};
const contentStyle: React.CSSProperties = {
  textAlign: "center",
  minHeight: 120,
  lineHeight: "120px",
  color: "#fff",
  backgroundColor: "#0958d9",
};

const footerStyle: React.CSSProperties = {
  textAlign: "center",
  color: "#fff",
  backgroundColor: "#4096ff",
};
const Page = () => {
  const { t, i18n } = useTranslation();
  console.log("当前语言：", i18n.language); // 调试：确认语言是否切换成功
  // console.log("翻译资源：", i18n.resources); // 调试：确认资源是否加载

  return (
    <>
      <Flex gap="middle" wrap>
        <Layout style={layoutStyle}>
          <Header style={headerStyle}>
            {" "}
            <Menu />
          </Header>
          <Content style={contentStyle}>
            {" "}
            <Button type="primary">Button</Button>
            {/* <Button type="primary">Button1</Button> */}
            <div>Page</div>
            <h1>{t("welcome")}</h1>
            <p>{t("description")}</p>
            {/* <p>{t("description")}</p>
            <p>{t("description")}</p>
            <p>{t("description")}</p>
            <p>{t("description")}</p> */}
          </Content>
          <Footer style={footerStyle}>Footer</Footer>
        </Layout>

        <LanguageSwitcher />
      </Flex>
    </>
  );
};

export default Page;
